﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Styles/s.css" rel="stylesheet" type="text/css" />
    <link href="css/ui-lightness/jquery-ui-1.8.12.custom.css" rel="stylesheet" type="text/css" />
    <style>
        .freePosition
        {
            position: absolute;
        }
        .person
        {
            position: absolute;
            width: 54px;
            min-height: 50px;
            padding: 7px;
            background: #FC3;
            border: 1px solid #FD5;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            -moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
            -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
            box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
            cursor: hand;
            margin-top: 10px;
            margin-left: 10px;
            display: inline-block;
            float: left;
        }
        section.mid, section.max
        {
            width: 400px;
             -webkit-transform:  translateZ(50px);
            -moz-transform: scaleX(3.16);
        }
        
        .person
        {
            vertical-align: top;
        }
        .headicon
        {
            float: right;
            -moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
            -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
            box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
        }
        
        .person .content
        {
            margin-top: 5px;
        }
        .person .name
        {
            margin:2px 0px 0px 3px;}
        .btns-panel
        {
            margin-right: -5px;
        }
        
        .out-btn
        {
            float: right;
            display: inline-block;
            margin-top: -5px;
            opacity: 0.8;
            height:12px;
        }
        .shadow
        {
            -moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
            -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
            box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
        }
    </style>
    <script id="personTemplate" type="text/x-jquery-tmpl">
        <section class='person min'>
            <section class='btns-panel' style="height:12px;">
                <span class="ui-icon ui-icon-close out-btn close-btn"></span>
                <span class="mid max ui-icon ui-icon-pin-w out-btn pin-btn"></span>
            </section>
            <section>
                <img class='headicon' src='${profile_image_url}'>
                <div class='name min'>
                    <strong>${screen_name}</strong>
                </div>
                <div class='title mid max'>
                    <strong>${screen_name}</strong>
                    <pre>${location} (${followers_count} - ${friends_count})</pre>
                    <p><small><strong>${description}</strong></small></p>
                </div>
                <div class='content max'>
                    ${status.text}
                </div>
           </section>
        </section>
    </script>
    <script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.8.12.custom.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.tmpl.js" type="text/javascript"></script>
    <script type="text/javascript" src="following.js"></script>
    <script>
        var followings = localStorage["followings"];
        $.get('Following.ashx', function (e) {
            //Show(e);
        });
        $(function () { Show(data); });

        function Show(persons) {
            var templateString = "";
            $("#personTemplate").tmpl(persons).appendTo("#container");

            $(".person .out-btn").hover(function () { $(this).addClass('shadow') }, function () { $(this).removeClass('shadow'); });
            $(".person .close-btn").click(
                function (event) {
                    event.stopPropagation();
                    $(this).closest('.person').fadeOut();
                }
            );
            $(".person .pin-btn").click(
                function () {
                    event.stopPropagation();
                    $(this).toggleClass('ui-icon-pin-w');
                    $(this).toggleClass('ui-icon-pin-s');
                }
            );

            $(".person").find('.mid,.max').hide();
            $(".person").draggable({ start: function () { $(this).addClass('drag'); }, stop: function () { $(this).removeClass('drag'); } });
            $(".person").each(function (index) {
                $(this).css({ left: parseInt(index / 4) * 80 + 'px', top: index % 4 * 110 + 'px' });
            });
            $(".person")
            .hover(
                function () {
                    $(this).addClass("pick");
                },
                function () {
                    _self = $(this);
                    if (_self.find('.pin-btn').hasClass('ui-icon-pin-s')) return;
                    _self.find('.mid,.max').delay(800).fadeOut();
                    _self.find('.min').delay(800).fadeIn();
                    if (!_self.hasClass('min')) {
                        _self
                        .delay(800)
                        .animate({
                            width: '54px'
                        }, {
                            duration: 500,
                            specialEasing: {
                                width: 'swing'
                            }, complete: function () {
                            }
                        });
                    }

                    _self.removeClass("pick");
                    _self.removeClass('mid max');
                    _self.addClass('min');
                }
            );
            $(".person").click(function () {
                var _self = $(this);
                if (_self.hasClass('min')) {
                    _self.find('.min').hide();
                    _self.find('.mid').fadeIn();

                    _self.removeClass('min');
                    _self.addClass('mid');

                    _self.animate({
                        width: '400px'
                    }, {
                        duration: 500,
                        specialEasing: {
                            width: 'swing'
                        }, complete: function () {
                        }
                    });

                }
                else if (_self.hasClass('mid')) {
                    _self.find('.max').fadeIn();

                    _self.removeClass('mid');
                    _self.addClass('max');
                }
            });

        }

    </script>
</head>
<body>
    <section id="container">
    </section>
</body>
</html>
